<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制拆解</title>
</head>
<body>

     <canvas id="c1" width="600" height="400">
        如果浏览器不支持canvas，那么就会把这个标签当作普通标签，就会显示canvas里面的文字
     </canvas>

     <script>
        // 1.找到画布
        var c1 = document.querySelector("#c1")
        // 2.获取画笔，画笔就是上下文对象
        var ctx = c1.getContext("2d")

        ctx.rect(100, 100, 200, 200)  // 画一个矩形
        ctx.stroke()    // 显示路径
        // 上两句代码等同于 ctx.strokeRect(100, 100, 200, 200)

        ctx.rect(150, 150, 250, 250)   // 画一个矩形
        ctx.fill()   // 填充
        // // 上两句代码等同于 ctx.fillRect(150,150, 200,200)


        /**
         * 问题：
         *  使用拆解进行矩形绘制时发现，本来应该是一个绘制路径，一个绘制填充矩形，但是出现的效果是两个填充矩形
         * 
         * 分析：
         *  是因为，在canvas中，如果没有抬起画笔的操作，就会被认为使用最后的方式去绘图，在本例中也就使用fill去填充
         * 
         * 解决：
         *  每一段绘制，都要使用beginPath()和closePath()执行抬起画笔的操作
         */

         // 开始绘制
         ctx.beginPath()
         ctx.rect(0, 0, 50, 50)
         ctx.fill()
         ctx.closePath()
         // 关闭绘制，相当于抬起画笔

         // 又开始绘制了
         ctx.beginPath()
         ctx.rect(30, 30, 50, 50)
         ctx.stroke()
         ctx.closePath()
         // 关闭绘制，这段绘制结束了


     </script>
</body>
</html>